<template>
    <div v-bind:id=id v-bind:data=data v-bind:type=type :dataUrl="dataUrl"></div>
</template>

<script>
    import echarts from 'echarts'
    import macarons from 'node_modules/echarts/theme/macarons.js'
    export default {
        props: ['id','data','type'],
        data() {
            return {
                ChartPie: null,
                dataUrl: ''
            }
        },
        mounted () {
            this.drawShape(this.id, this.data, this.type)
        },
        beforeDestroy () {
            if(this.ChartPie){
                this.ChartPie.clear()
            }
        },
        methods: {
            drawShape(id,data, type){
                let self = this
                let myChart = document.getElementById(id)
                self.ChartPie = echarts.init(myChart, type)
                self.ChartPie.setOption(data)
                self.dataUrl = self.ChartPie.getDataURL()
                window.addEventListener('resize', () =>{
                    self.ChartPie.resize()
                })
            }
        },
        //深度监听，父组件开始传过来的值是没有数据的，只是图表的配置项，父组件进行ajax请求后改变数据的值，传递过来
        watch: {
            data: {
                handler(newValue, oldValue){
                    this.drawShape(this.id, newValue);
                },
                deep: true
            }
        }
    }
</script>
